<template>
  <view class="keyboard-box">
    <view class="flex-center key" @click="emit('key-click', '1')">1</view>
    <view class="flex-center key" @click="emit('key-click', '2')">2</view>
    <view class="flex-center key" @click="emit('key-click', '3')">3</view>
    <view class="flex-center key" @click="emit('key-click', 'backspace')">
      <img :src="iconDelete" alt="del" class="icon" />
    </view>
    <view class="flex-center key" @click="emit('key-click', '4')">4</view>
    <view class="flex-center key" @click="emit('key-click', '5')">5</view>
    <view class="flex-center key" @click="emit('key-click', '6')">6</view>
    <view class="flex-center key" @click="emit('key-click', '7')">7</view>
    <view class="flex-center key" @click="emit('key-click', '8')">8</view>
    <view class="flex-center key" @click="emit('key-click', '9')">9</view>
    <view class="flex-center key zero-key" @click="emit('key-click', '0')">0</view>
    <view class="flex-center key confirm-key" @click="emit('confirm')">{{ confirmKeyText }}</view>
  </view>
</template>

<script setup lang="ts">
import iconDelete from '@/static/icon/delete.svg';

defineProps({
  confirmKeyText: {
    type: String,
    default: '确定',
  },
});
const emit = defineEmits(['key-click', 'confirm']);
</script>

<style scoped lang="less">
.keyboard-box {
  border-top: 2rpx solid #e3e3e3;
  background-color: #eff4f8;
  padding: 32rpx 14rpx;
  display: grid;
  grid-template-columns: repeat(4, 170rpx);
  grid-template-rows: repeat(4, 80rpx);
  gap: 14rpx;

  .key {
    background: white;
    border-radius: 5px;
    font-size: 32rpx;
    color: #333;
  }

  .icon {
    width: 48rpx;
    height: 48rpx;
  }

  .confirm-key {
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 5;
    color: white;
    background-color: #1b91ff;
    font-size: 30rpx;
    letter-spacing: 6rpx;
  }

  .zero-key {
    grid-column-start: 1;
    grid-column-end: 4;
  }
}
</style>
